import {replaceByObj} from "./xUtil.js";
import xDatePicker from './xDatePicker.js';
import xCascade from './xCascade.js';
//import mSelect from './mSelect.js';
import zInput from './zInput.js';
import xInput from './xInput.js';
import xTextarea from './xTextarea.js';
import xBind from './xBind.js';
import xID from './xID.js';
import xUpload from './xUpload.js';
import xSelect from './xSelect.js';
import xGrid from './xGrid.js';
import xGroupInput from './xGroupInput.js';
import xCrop from './xCrop.js';
import xThumbnail from './xThumbnail.js';
import xTreeSelect from './xTreeSelect.js';
/**
cfg:
{
 el: "div1",
 binds: binds,
 col:'col-md-4', //默认缺省的 col 设置
 obj: obj,
 style:""
 grid:""
 title:'个人信息'
 }

 首先 生成框架
 然后 再渲染 单个 控件

 */
const tmplBase = `<div class="{{class}}">
                 </div> `


const tmplItem = '<div type="panel-item">{{label}}{{control}}</div>';

const tmplCompDiv = '<div id="{{id}}"></div>';
const tmplLabel = '<div type ="panel-label"><label class= "{{mandatory}}">{{label}}</label></div>';
const tmplControl = '<div type ="panel-control" >{{control}}</div>';
const tmplInput ='<input type="{{type}}" id ="{{id}}" />';
const tmplTitle ='<div type="panel-title"><span>{{title}}</span></div>';

const tmplContainer = '<div  type="input-head" class="xhead"><div id="{{id}}"> </div></div>';

export default class xPanel {
    $root;
    $main;
    vCfg;
    // 所有的cols
    $cols;
    //绑定配置用
    vBinds = [];

    // 构造函数
    constructor(cfg) {
        this.vCfg = cfg;
        this.$root = $('#' + cfg.el);
        this.$root.html(tmplBase.replace('{{class}}', cfg.style||'panel'));
        this.$main = this.$root.find('>div');
        this.setItemDivId();
        this.renderGrid();
        this.renderControl();
    };

    /* 渲染区块 开始 */
    init() {
        this.bind();
        this.$cols  = this.$root.find('[type="col"]');
        this.refresh();
    }

    setItemDivId() {
        for (let item of this.vCfg.binds) {
            item._DivId = xID.getID();
        }
    }


    renderGrid() {
        this.$main.html(xGrid.renderGrid({
            data: this.vCfg.binds,
            cbRenderCell: this.renderItem.bind(this),
            grid: this.vCfg.grid,
            col: this.vCfg.col,
            group: this.vCfg.group
        }));
    }

    renderItem(item) {
        let label = replaceByObj(tmplLabel,{label:item.label || '',
             mandatory:item.cfg&&item.cfg.mandatory?'mandatory':''});
        let control = tmplControl.replace('{{control}}', tmplCompDiv.replace('{{id}}', item._DivId || ''));
        return replaceByObj(tmplItem, {label, control});
    }

    renderControl() {
        let $div;
        for (let item of this.vCfg.binds) {
            switch (item.type) {
                case 'xDatePicker':
                    item.cfg.el = item._DivId;
                    item.el = new xDatePicker(item.cfg);
                    this.vBinds.push({el: item.el, type: 'xComp', key: item.key,event:item.event})
                    break;
                /*
                case 'mSelect':
                    item.cfg.el = item._DivId;
                    item.el = new mSelect(item.cfg);
                    this.vBinds.push({el: item.el, type: 'xComp', key: item.key,event:item.event})
                    break; */
                case 'xCascade':
                    item.cfg.el = item._DivId;
                    item.el = new xCascade(item.cfg);
                    this.vBinds.push({el: item.el, type: 'xComp', key: item.key,event:item.event})
                    break;
                case 'input':
                    item.cfg.el = item._DivId;
                    item.el = new xInput(item.cfg);
                    this.vBinds.push({el: item.el, type: 'xComp', key: item.key,event:item.event})
                    break;
                case 'groupInput':
                    item.cfg.el = item._DivId;
                    item.el = new xGroupInput(item.cfg);
                    this.vBinds.push({el: item.el, type: 'xComp', key: item.key,event:item.event})
                    break;
                case 'zInput':
                    item.cfg.el = item._DivId;
                    item.el = new zInput(item.cfg);
                    this.vBinds.push({el: item.el, type: 'xComp', key: item.key,event:item.event})
                    break;
                case 'xUpload':
                    item.cfg.el = item._DivId;
                    item.el = new xUpload(item.cfg);
                    this.vBinds.push({el: item.el, type: 'xComp', key: item.key,event:item.event})
                    break;
                case 'xCrop':
                    item.cfg.el = item._DivId;
                    item.el = new xCrop(item.cfg);
                    this.vBinds.push({el: item.el, type: 'xComp', key: item.key,event:item.event});
                    break;
                case 'xThumbnail':
                    item.cfg.el = item._DivId;
                    item.el = new xThumbnail(item.cfg);
                    this.vBinds.push({el: item.el, type: 'xComp', key: item.key,event:item.event});
                    break;
                case 'xSelect':
                    item.cfg.el = item._DivId;
                    item.el = new xSelect(item.cfg);
                    this.vBinds.push({el: item.el, type: 'xComp', key: item.key,event:item.event})
                    break;
                case 'xTreeSelect':
                    item.cfg.el = item._DivId;
                    item.el = new xTreeSelect(item.cfg);
                    this.vBinds.push({el: item.el, type: 'xComp', key: item.key,event:item.event})
                    break;
                case 'xTextarea':
                    item.cfg.el = item._DivId;
                    item.el = new xTextarea(item.cfg);
                    this.vBinds.push({el: item.el, type: 'xComp', key: item.key,event:item.event})
                    break;
                case 'text':
                    $div = $('#'+item._DivId);
                    if(!item.el)
                        item.el = xID.getID();
                    let input = replaceByObj(tmplInput,{type:'text',id:item.el});
                    $div.html(input);
                    break;
                case 'container':
                     $div = $('#'+item._DivId);
                    $div.html(replaceByObj(tmplContainer,{id:item.cfg.id}));
                    this.vBinds.push({ type: 'event', key: item.key,event:item.event});
                    break;
            }
        }
    };

    bind() {
        this.vBindObj = new xBind({obj: this.vCfg.obj, binds: this.vBinds});
    }

    verify() {
        let result = true;
        for (let c of this.vBinds) {
            if (c.el && c.el.verify)
                result = c.el.verify() && result
        }
        return result;
    }

    setItemData(index, data) {
        let bind = this.vBinds[index];
        if (bind.el && bind.el.setData) {
            bind.el.setData(data);
        }
    }

    setItemFilter(index, key ,value) {
        let bind = this.vBinds[index];
        if (bind.el && bind.el.setFilter) {
            bind.el.setFilter(key,value);
        }
    }

    refresh(){
        if(this.$cols){
            for(let i=0;i<this.vBinds.length;i++ ){
                let $col = $(this.$cols[i]);
                if(this.vBinds[i].hide){
                    $col.hide();
                }else{
                    $col.show();
                }
            }
        }
    }

    setHide(index){
        this.vBinds[index].hide= true;
        this.setOffMandatory(index);
    }

    setShow(index){
        this.vBinds[index].hide = false;
    }

    setMandatory(index){
        this.vCfg.binds[index].cfg.mandatory = true;
        if(this.$cols){
            let $label  = $(this.$cols[index]).find('[data-key="panel-label"] label');
            $label.addClass("iconfont mandatory");
        }
    }

    setOffMandatory(index){
        this.vCfg.binds[index].cfg.mandatory = false;
        if(this.$cols){
            let $label  = $(this.$cols[index]).find('[data-key="panel-label"] label');
            $label.removeClass("iconfont mandatory");
        }
    }

    setItemReadonly(index,status){
        let control = this.vCfg.binds[index].el;
        if(control && control.setReadonly){
            control.setReadonly(status);
        }
    }

}